<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Statistic Widgets</title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
</head>

<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">



  
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Statistic widgets
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item active">Statistic widgets</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box bg-info">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Tasks</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-white">425</div>
                  <span class="text-white">Due Tasks</span>
                </div>
              </div>

              <div class="card-body bg-gray-light py-12">
                <span class="text-muted mr-1">Completed:</span>
                <span class="text-dark">125</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-info" role="progressbar" style="width: 65%; height: 3px;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box bg-danger">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Overdue</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-white">185</div>
                  <span class="text-white">Tasks</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Yesterday's overdue:</span>
                <span class="text-dark">45</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 72%; height: 3px;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box">
              <div class="box-body bg-primary">
                <div class="flexbox">
                  <h5>Issues</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-white">252</div>
                  <span class="text-white">Open</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Closed today:</span>
                <span class="text-dark">176</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 55%; height: 3px;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box bg-success">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Features</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-white">489</div>
                  <span class="text-white">Proposals</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Implemented:</span>
                <span class="text-dark">156</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-success" role="progressbar" style="width: 95%; height: 3px;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
		  
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Tasks</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-info">154</div>
                  <span class="text-muted">Due Tasks</span>
                </div>
              </div>

              <div class="card-body bg-gray-light py-12">
                <span class="text-muted mr-1">Completed:</span>
                <span class="text-dark">125</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 3px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Overdue</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-red">145</div>
                  <span class="text-muted">Tasks</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Yesterday's overdue:</span>
                <span class="text-dark">48</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 72%; height: 3px;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Issues</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-primary">452</div>
                  <span class="text-muted">Open</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Closed today:</span>
                <span class="text-dark">168</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 55%; height: 3px;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Features</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-success">899</div>
                  <span class="text-muted">Proposals</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Implemented:</span>
                <span class="text-dark">589</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-success" role="progressbar" style="width: 95%; height: 3px;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
		  
      </div>
      <!-- /.row -->

      <div class="row">
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <span class="info-box-icon bg-info rounded"><i class="ion ion-stats-bars"></i></span>

            <div class="info-box-content">
              <span class="info-box-number">90<small>%</small></span>
              <span class="info-box-text">Store Traffic</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <span class="info-box-icon bg-success rounded-circle"><i class="ion ion-thumbsup"></i></span>

            <div class="info-box-content">
              <span class="info-box-number">41,410</span>
              <span class="info-box-text">User Likes</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <span class="info-box-icon bg-primary rounded-left"><i class="ion ion-bag"></i></span>

            <div class="info-box-content">
              <span class="info-box-number">760</span>
              <span class="info-box-text">Monthly Sales</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <span class="info-box-icon bg-danger rounded-right"><i class="ion ion-person-stalker"></i></span>

            <div class="info-box-content">
              <span class="info-box-number">2,000</span>
              <span class="info-box-text">Join Members</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
		
	  <div class="row">
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <span class="info-box-icon bg-info rounded"><i class="ion ion-stats-bars"></i></span>

            <div class="info-box-content text-right">
              <span class="info-box-number">90<small>%</small></span>
              <span class="info-box-text">Store Traffic</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <span class="info-box-icon bg-success rounded-circle"><i class="ion ion-thumbsup"></i></span>

            <div class="info-box-content text-right">
              <span class="info-box-number">41,410</span>
              <span class="info-box-text">User Likes</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <div class="info-box-content float-left ml-0">
              <span class="info-box-number">760</span>
              <span class="info-box-text">Monthly Sales</span>
            </div>
            <!-- /.info-box-content -->
            <span class="info-box-icon bg-primary rounded-circle float-right"><i class="ion ion-bag"></i></span>
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box">
            <div class="info-box-content float-left ml-0">
              <span class="info-box-number">2,000</span>
              <span class="info-box-text">Join Members</span>			  
            <!-- /.info-box-content -->
            </div>
            <span class="info-box-icon bg-danger rounded float-right"><i class="ion ion-person-stalker"></i></span>
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <!-- =========================================================== -->

      <div class="row">
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box bg-info">
            <span class="info-box-icon push-bottom rounded"><i class="ion ion-ios-pricetag-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">New Clients</span>
              <span class="info-box-number">450</span>

              <div class="progress">
                <div class="progress-bar" style="width: 45%"></div>
              </div>
              <span class="progress-description">
                    45% Increase in 28 Days
                  </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box bg-success">
            <span class="info-box-icon push-bottom rounded-circle"><i class="ion ion-ios-eye-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Total Visits</span>
              <span class="info-box-number">15,489</span>

              <div class="progress">
                <div class="progress-bar" style="width: 40%"></div>
              </div>
              <span class="progress-description">
                    40% Increase in 28 Days
                  </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box bg-primary">
            <span class="info-box-icon push-bottom rounded-left"><i class="ion ion-ios-cloud-download-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Downloads</span>
              <span class="info-box-number">55,005</span>

              <div class="progress">
                <div class="progress-bar" style="width: 85%"></div>
              </div>
              <span class="progress-description">
                    85% Increase in 28 Days
                  </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col">
          <div class="info-box bg-danger">
            <span class="info-box-icon push-bottom rounded-right"><i class="ion-ios-chatbubble-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Direct Chat</span>
              <span class="info-box-number">13,921</span>

              <div class="progress">
                <div class="progress-bar" style="width: 50%"></div>
              </div>
              <span class="progress-description">
                    50% Increase in 28 Days
                  </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <!-- =========================================================== -->

      <!-- Small boxes (Stat box) -->
      <div class="row">
        <div class="col-xl-3 col-md-6 col-6">
          <!-- small box -->
          <div class="small-box bg-info">
            <div class="inner">
              <h3>255</h3>

              <p>New Orders</p>
            </div>
            <div class="icon">
              <i class="fa fa-shopping-bag"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-xl-3 col-md-6 col-6">
          <!-- small box -->
          <div class="small-box bg-success">
            <div class="inner">
              <h3>67<sup style="font-size: 20px">%</sup></h3>

              <p>Sales Rate</p>
            </div>
            <div class="icon">
              <i class="fa fa-bar-chart"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-xl-3 col-md-6 col-6">
          <!-- small box -->
          <div class="small-box bg-primary">
            <div class="inner">
              <h3>78</h3>

              <p>Registrations</p>
            </div>
            <div class="icon">
              <i class="fa fa-user-plus"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-xl-3 col-md-6 col-6">
          <!-- small box -->
          <div class="small-box bg-danger">
            <div class="inner">
              <h3>65</h3>

              <p>New Visitors</p>
            </div>
            <div class="icon">
              <i class="fa fa-pie-chart"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
      </div>
      <!-- /.row -->

      <!-- =========================================================== -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="flexbox flex-justified text-center bg-white">
              <div class="no-shrink py-30">
                <span class="ion ion-arrow-graph-up-right font-size-50 text-success"></span>
              </div>

              <div class="py-30 bg-gray-light">
                <div class="font-size-30">+85</div>
                <span>Sales</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="flexbox flex-justified text-center bg-white">
              <div class="no-shrink py-30">
                <span class="ion ion-social-facebook font-size-50" style="color: #3b5998"></span>
              </div>

              <div class="py-30 bg-gray-light">
                <div class="font-size-30">+512</div>
                <span>Likes</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
		
        <!-- fix for small devices only -->
        <div class="col-12 h-30 d-lg-none"></div>

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="flexbox flex-justified text-center bg-white">
              <div class="no-shrink py-30">
                <span class="ion ion-social-dribbble-outline font-size-50" style="color: #ea4c89"></span>
              </div>

              <div class="py-30 bg-gray-light">
                <div class="font-size-30">+985</div>
                <span>Shots</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="flexbox flex-justified text-center bg-white">
              <div class="no-shrink py-30">
                <span class="ion ion-social-twitter-outline font-size-50" style="color: #00aced"></span>
              </div>

              <div class="py-30 bg-gray-light">
                <div class="font-size-30">+9258</div>
                <span>Followers</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
		  
		<div class="col-12 h-30"></div>
		  
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="flexbox flex-justified text-center bg-success">
              <div class="no-shrink py-30">
                <span class="ion ion-arrow-graph-up-right font-size-50"></span>
              </div>

              <div class="py-30 bg-gray-light text-dark">
                <div class="font-size-30">+85</div>
                <span>Sales</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="flexbox flex-justified text-center bg-info">
              <div class="no-shrink py-30">
                <span class="ion ion-social-facebook font-size-50"></span>
              </div>

              <div class="py-30 bg-gray-light text-dark">
                <div class="font-size-30">+512</div>
                <span>Likes</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
		
        <!-- fix for small devices only -->
        <div class="col-12 h-30 d-lg-none"></div>

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="flexbox flex-justified text-center bg-danger">
              <div class="no-shrink py-30">
                <span class="ion ion-social-dribbble-outline font-size-50"></span>
              </div>

              <div class="py-30 bg-gray-light text-dark">
                <div class="font-size-30">+985</div>
                <span>Shots</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="flexbox flex-justified text-center bg-teal">
              <div class="no-shrink py-30">
                <span class="ion ion-social-twitter-outline font-size-50"></span>
              </div>

              <div class="py-30 bg-gray-light text-dark">
                <div class="font-size-30">+9258</div>
                <span>Followers</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
		  
		<div class="col-12 h-30"></div>
		  
      </div>
      <!-- /.row -->

      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          <div class="box box-body text-center">
              <div class="font-size-40 font-weight-200">280</div>
              <div>Countries</div>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          <div class="box box-body text-center">
              <div class="font-size-40 font-weight-200">25,568</div>
              <div>Users</div>
          </div>
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-xl-3 col-md-6 col-12">
          <div class="box box-body text-center bg-info">
              <div class="font-size-40 font-weight-200">+658</div>
              <div>Article</div>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          <div class="box box-body text-center bg-success">
              <div class="font-size-40 font-weight-200">$58,963</div>
              <div>Income</div>
          </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body bg-primary">
              <div class="flexbox">
                <span class="ion ion-ios-person-outline font-size-50"></span>
                <span class="font-size-40 font-weight-200">45,965</span>
              </div>
              <div class="text-right">Users</div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body bg-danger">
              <div class="flexbox">
                <span class="ion ion-ios-copy-outline font-size-50"></span>
                <span class="font-size-40 font-weight-200">59,785</span>
              </div>
              <div class="text-right">Invoices</div>
            </div>
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body">
              <div class="flexbox">
                <span class="ion ion-ios-paper-outline text-primary font-size-50"></span>
                <span class="font-size-40 font-weight-200">+859</span>
              </div>
              <div class="text-right">Article</div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body">
              <div class="flexbox">
                <span class="ion ion-ios-briefcase-outline text-danger font-size-50"></span>
                <span class="font-size-40 font-weight-200">95,458</span>
              </div>
              <div class="text-right">Income</div>
            </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body">
              <h6 class="text-uppercase">Today likes</h6>
              <div class="flexbox mt-2">
                <span class="ion ion-ios-heart text-danger font-size-40"></span>
                <span class=" font-size-30">85,987</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body">
              <h6 class="text-uppercase">TODAY COMMENTS</h6>
              <div class="flexbox mt-2">
                <span class="ion ion-ios-chatboxes text-info font-size-40"></span>
                <span class=" font-size-30">41,259</span>
              </div>
            </div>
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body bg-success">
              <h6 class="text-uppercase">Today likes</h6>
              <div class="flexbox mt-2">
                <span class="ion ion-ios-heart font-size-40"></span>
                <span class=" font-size-30">75,951</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body bg-info">
              <h6 class="text-uppercase">TODAY COMMENTS</h6>
              <div class="flexbox mt-2">
                <span class="ion ion-ios-chatboxes  font-size-40"></span>
                <span class=" font-size-30">15,845</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body">
              <div class="font-size-18 flexbox align-items-center">
                <span>Users</span>
                <i class="ion ion-ios-person-outline"></i>
              </div>

              <div class="progress progress-xxs mt-10 mb-0">
                <div class="progress-bar" role="progressbar" style="width: 35%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small class="font-weight-300 mb-5">62,158</small>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body">
              <div class="font-size-18 flexbox align-items-center">
                <span>Users</span>
                <span>68,951</span>
              </div>

              <div class="progress progress-xxs mt-10 mb-0">
                <div class="progress-bar" role="progressbar" style="width: 35%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small class="font-weight-300 mb-5"><i class="fa fa-sort-down text-danger mr-1"></i> %18 decrease from last month</small>
            </div>
        </div>
        <!-- /.col -->

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body">
              <div class="font-size-18 flexbox align-items-center">
                <span>Users</span>
                <span>15,956</span>
              </div>

              <div class="progress progress-xxs mt-10 mb-0">
                <div class="progress-bar" role="progressbar" style="width: 35%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
			  <div class="text-right"><small class="font-weight-300 mb-5"><i class="fa fa-sort-up text-success mr-1"></i> %48 up</small></div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body">
              <div class="font-size-18 flexbox align-items-center">
                <span>Orders</span>
              </div>

              <div class="progress progress-xxs mt-10 mb-0">
                <div class="progress-bar" role="progressbar" style="width: 35%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
			  <small class="flexbox">
                <strong>158</strong>
                <span class="font-weight-300 mb-5"><i class="fa fa-sort-up text-success mr-1"></i> %85 up</span>
              </small>
            </div>
        </div>
        <!-- /.col -->
		  
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-12 ">
          	<div class="box">
              <div class="row no-gutters py-2">

                <div class="col-sm-6 col-lg-3">
                  <div class="box-body br-1 border-light">
                    <div class="flexbox mb-1">
                      <span>
                        <i class="ion-person font-size-26"></i><br>
                        New Users
                      </span>
                      <span class="text-primary font-size-40">845</span>
                    </div>
                    <div class="progress progress-xxs mt-10 mb-0">
                      <div class="progress-bar" role="progressbar" style="width: 35%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>


                <div class="col-sm-6 col-lg-3 hidden-down">
                  <div class="box-body br-1 border-light">
                    <div class="flexbox mb-1">
                      <span>
                        <i class="ion-document font-size-26"></i><br>
                        Today Invoices
                      </span>
                      <span class="text-info font-size-40">952</span>
                    </div>
                    <div class="progress progress-xxs mt-10 mb-0">
                      <div class="progress-bar bg-info" role="progressbar" style="width: 55%; height: 4px;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>


                <div class="col-sm-6 col-lg-3 d-none d-lg-block">
                  <div class="box-body br-1 border-light">
                    <div class="flexbox mb-1">
                      <span>
                        <i class="ion-information font-size-26"></i><br>
                        Open Issues
                      </span>
                      <span class="text-warning font-size-40">845</span>
                    </div>
                    <div class="progress progress-xxs mt-10 mb-0">
                      <div class="progress-bar bg-warning" role="progressbar" style="width: 65%; height: 4px;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>


                <div class="col-sm-6 col-lg-3 d-none d-lg-block">
                  <div class="box-body">
                    <div class="flexbox mb-1">
                      <span>
                        <i class="ion-folder font-size-26"></i><br>
                        New Projects
                      </span>
                      <span class="text-danger font-size-40">158</span>
                    </div>
                    <div class="progress progress-xxs mt-10 mb-0">
                      <div class="progress-bar bg-danger" role="progressbar" style="width: 40%; height: 4px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>


              </div>
            </div>
        </div>
        <!-- /.col -->
		  
      </div>
      <!-- /.row -->
		
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body">
              <h6>
                <span class="text-uppercase">Revenue</span>
                <span class="float-right"><a class="btn btn-xs btn-primary" href="#">View</a></span>
              </h6>
              <br>
              <p class="font-size-26">$845,1258</p>

              <div class="progress progress-xxs mt-0 mb-10">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 35%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="font-size-12"><i class="ion-arrow-graph-down-right text-success mr-1"></i> %18 decrease from last month</div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box box-body">
              <h6>
                <span class="text-uppercase">SELLS</span>
                <span class="float-right"><a class="btn btn-xs btn-primary" href="#">View</a></span>
              </h6>
              <br>
              <p class="font-size-26">15,958</p>

              <div class="progress progress-xxs mt-0 mb-10">
                <div class="progress-bar bg-success" role="progressbar" style="width: 75%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="font-size-12"><i class="ion-arrow-graph-up-right text-success mr-1"></i> 12548 more than last year</div>
            </div>
        </div>
        <!-- /.col -->

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body">
              <h6>
                <span class="text-uppercase">ORDERS</span>
                <span class="float-right"><a class="btn btn-xs btn-primary" href="#">View</a></span>
              </h6>
              <br>
              <p class="font-size-26">159,1258</p>

              <div class="progress progress-xxs mt-0 mb-10">
                <div class="progress-bar bg-purple" role="progressbar" style="width: 55%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="font-size-12"><i class="ion-arrow-graph-down-right text-danger mr-1"></i> %95 down</div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box box-body">
              <h6>
                <span class="text-uppercase">VISITORS</span>
                <span class="float-right"><a class="btn btn-xs btn-primary" href="#">View</a></span>
              </h6>
              <br>
              <p class="font-size-26">84,9658</p>

              <div class="progress progress-xxs mt-0 mb-10">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 52%; height: 4px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="flexbox font-size-12">
                <span><i class="ion-arrow-graph-down-right text-success mr-1"></i> %54 up</span>
                <span>+90258</span>
              </div>
            </div>
        </div>
        <!-- /.col -->
		  
      </div>
      <!-- /.row -->	
	  	
      <div class="row">
	  	  <div class="col-12">
			  <h3 class="page-header">Icon Tiles</h3>
		  </div>
		  
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
			<div class="box-body py-25">
				<p class="mt-5"><i class="si si-badge fa-4x"></i></p>
				<p class="font-weight-600">Badges</p>
			</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-envelope fa-4x text-success"></i>
					</p>
					<p class="font-weight-600">Inbox</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-bag fa-4x text-danger"></i>
					</p>
					<p class="font-weight-600">Cart</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-bar-chart fa-4x text-cyan"></i>
					</p>
					<p class="font-weight-600">Live Stats</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-cloud-upload fa-4x text-flat"></i>
					</p>
					<p class="font-weight-600">~ 7.5 MB/s</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-chemistry fa-4x text-purple"></i>
					</p>
					<p class="font-weight-600">Lab</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-diamond fa-4x text-info"></i>
					</p>
					<p class="font-weight-600">Minecraft</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-camera fa-4x text-muted"></i>
					</p>
					<p class="font-weight-600">Videos</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-support fa-4x text-warning"></i>
					</p>
					<p class="font-weight-600">Support</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-bubbles fa-4x text-brown"></i>
					</p>
					<p class="font-weight-600">Chat</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-compass fa-4x text-pink"></i>
					</p>
					<p class="font-weight-600">Locating..</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="mt-5">
						<i class="si si-globe fa-4x text-black"></i>
					</p>
					<p class="font-weight-600">World Live</p>
				</div>
			</a>
		</div>
		  
	  </div>
      <!-- /.row -->
		
	  <div class="row">
	  	  <div class="col-12">
			  <h3 class="page-header">Text Tiles</h3>
		  </div>
		  
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40">
						<strong>$499</strong>
					</p>
					<p class="font-weight-600">Earnings</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-success">
						<strong>10</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-envelope text-muted mr-5"></i> Messages
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-danger">
						<strong>3</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-shopping-cart text-muted mr-5"></i> Products
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-cyan">
						<strong>98.25</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-line-chart text-muted mr-5"></i> Sales/Week
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-flat">
						<strong>12.63</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-cloud-upload text-muted mr-5"></i> MB/s
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-purple">
						<strong>8</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-flask text-muted mr-5"></i> Tests
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-pink">
						<strong>987&euro;</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-money text-muted mr-5"></i> Balance
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-muted">
						<strong>35</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-video-camera text-muted mr-5"></i> Videos
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-warning">
						<strong>15</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-ticket text-muted mr-5"></i> Tickets
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-brown">
						<strong>19</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-comments text-muted mr-5"></i> Comments
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-pink">
						<strong>1.69</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-location-arrow text-muted mr-5"></i> Heading
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25">
					<p class="font-size-40 text-black">
						<strong>1.258</strong>
					</p>
					<p class="font-weight-600">
						<i class="fa fa-users text-muted mr-5"></i> Online
					</p>
				</div>
			</a>
		</div>
		  
	  </div>
      <!-- /.row -->
		
	  <div class="row">
	  	  <div class="col-12">
			  <h3 class="page-header">Icon Tiles Multi Row</h3>
		  </div>
		  
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Badges</p>
				</div>
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-badge fa-4x"></i>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Inbox</p>
				</div>
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-envelope fa-4x text-success"></i>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Cart</p>
				</div>
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-bag fa-4x text-danger"></i>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Live Stats</p>
				</div>
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-bar-chart fa-4x text-cyan"></i>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">~ 7.5 MB/s</p>
				</div>
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-cloud-upload fa-4x text-flat"></i>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Lab</p>
				</div>
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-chemistry fa-4x text-purple"></i>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-diamond fa-4x text-info"></i>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Minecraft</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-camera fa-4x text-muted"></i>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Videos</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-support fa-4x text-warning"></i>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Support</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-bubbles fa-4x text-brown"></i>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Chat</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-compass fa-4x text-pink"></i>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Locating..</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-shadow text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="mt-5">
						<i class="si si-globe fa-4x text-black"></i>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">World Live</p>
				</div>
			</a>
		</div>
	</div>
		
      <!-- /.row -->
	<div class="row gutters-tiny">
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">Earnings</p>
				</div>
				<div class="box-body">
					<p class="font-size-40">
						<strong>$499</strong>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-envelope text-muted mr-5"></i> Messages
					</p>
				</div>
				<div class="box-body">
					<p class="font-size-40 text-success">
						<strong>10</strong>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-shopping-cart text-muted mr-5"></i> Products
					</p>
				</div>
				<div class="box-body">
					<p class="font-size-40 text-danger">
						<strong>3</strong>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-line-chart text-muted mr-5"></i> Sales/Week
					</p>
				</div>
				<div class="box-body">
					<p class="font-size-40 text-cyan">
						<strong>98.25</strong>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-cloud-upload text-muted mr-5"></i> MB/s
					</p>
				</div>
				<div class="box-body">
					<p class="font-size-40 text-flat">
						<strong>12.63</strong>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-flask text-muted mr-5"></i> Tests
					</p>
				</div>
				<div class="box-body">
					<p class="font-size-40 text-purple">
						<strong>8</strong>
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="font-size-40 text-pink">
						<strong>987&euro;</strong>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-money text-muted mr-5"></i> Balance
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="font-size-40 text-muted">
						<strong>35</strong>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-video-camera text-muted mr-5"></i> Videos
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="font-size-40 text-warning">
						<strong>15</strong>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-ticket text-muted mr-5"></i> Tickets
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="font-size-40 text-brown">
						<strong>19</strong>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-comments text-muted mr-5"></i> Comments
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="font-size-40 text-pink">
						<strong>1.69</strong>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-location-arrow text-muted mr-5"></i> Heading
					</p>
				</div>
			</a>
		</div>
		<div class="col-6 col-md-4 col-xl-2">
			<a class="box box-link-pop text-center" href="javascript:void(0)">
				<div class="box-body">
					<p class="font-size-40 text-black">
						<strong>1.258</strong>
					</p>
				</div>
				<div class="box-body py-25 bg-light">
					<p class="font-weight-600">
						<i class="fa fa-users text-muted mr-5"></i> Online
					</p>
				</div>
			</a>
		</div>
	</div>
		
      <!-- /.row -->	
		
    </section>
    <!-- /.content -->
  </div>


</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
</body>
</html>
